<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圈圈的主页</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2022527_rxo7mfz7qt.css">
    <style>
        /* 引入好看的字体文件，在页面上使用字体 */

        @font-face {
            font-family: "Nunito-Bold";
            src: url(./font/Nunito-Bold.ttf);
        }
        html{
            scroll-behavior: smooth;
        }

        body,img,ul,li,p,h1{
            padding: 0;
            margin: 0;
            color: #393b3a;
            font-family: "Nunito-Bold";
        }
        
        ul,li{list-style: none;

        }
        .wrap{
            margin: 0px auto;
            width: 1000px;
        }
        header{background-color: #deecdf;
            /* 浮动元素的副元素加了高度，后面的内容就不会顶上来一行了 */
        height: 50px;}
            /* 导航栏在中间 */
        header ul {
            float: right;
            line-height: 50px;
            }
        header li {
            float: left;
            /* 增加外边距，第一个表示上下，第二个表示左右距离 */
          
            margin: 0px 25px;
            }
        header a { text-decoration: none;
        color: #393b3a;}

        #hello{
            height: 500px;
            background-color: #deecdf;
            text-align: center;
        }
        
        #hello  img{
            margin-top: 120px;
            margin-bottom: 20px;
            border-radius: 50%;
            
        }
        #about{
            height: 460px;
            padding-top: 50px;
        }
        
        #about span{
            background-image: url(./img/02-code.png);
            height: 400px;
            width: 400px;
            float: left;
        }
        
        #about>:nth-child(2){
            height: 460px;
            width: 550px;
            float: right;
        }
        
        #about p{
          padding:7px 0px ;
        }

        #skill{
            height: 240px;
            background-color: #f2f6f9;
            padding: 50px 0px;
        }
        #skill ul>li{
            float: left;
            width: 460px;
            margin: 12px 40px 0px 0px;
           
        }
        #skill ul>li em{
            width: 100px;
            float: left;        
        }
        #skill ul>li progress{
            width: 350px;
            float: left;        
        }
        #resume{
            height: 300px;
        }
        #resume>div>div{
            float: left;
            width: 500px;
        }
        #resume>div>div li{
            margin: 12px 0px;
          
        }
        #service{
            background-color: #f2f6f9;
            height: 440px;
            padding: 50px;
        }
        #service>div li{
            width: 190px;
            height: 250px;
            float: left;
            background-color: #fff;
            padding: 20px;
            margin: 0px 10px 0px 0px;
        }
        #service>div li>i{
            font-size: 60px;
            width: 70px;
            height: 70px;
            margin: 0px auto;
            display: block;
        }
        #service>div li>h3{
            text-align: center;
        }
        #portfolio{
            height: 600px;
            padding: 40px 0px;
        }
        #portfolio>div li{
            margin: 10px 20px 10px 0px;
            float: left;
        }
        #contact{
            background-color: #f2f6f9;
            height: 440px;
            padding: 50px;
        }
        #contact form{
            width: 550px;
        }
    
        #contact form{
            width: 500px;
            float: left;
        }
    
        #contact form input{
           height: 35px;
           display: block;
           margin-bottom: 15px;
           padding: 5px;
           width: 100%;
        }
        #contact form textarea{
           display: block;
           margin-bottom: 15px;
           padding: 5px;
           width: 100%;
        }
    
        #contact form button{
            height: 40px;
            width: 150px;
            margin: 0px auto;
            display: block;
            background-color: #439048;
            color: #fff;
            font-size: 17px;
            font-weight: bold;
            border-radius: 20px;
        }
    
        #contact>.wrap>div{
            float: left;
            width: 470px;
        }
      
    
        #contact>.wrap>div img{
            width: 300px;
            margin: 0px auto;
            display: block;
        }
        #contact>.wrap>div p{
            width: 300px;
            margin: 20px auto;
            text-align: center;
        }
        footer{
            padding: 30px 0px;
        }
   
        footer p{
            text-align: center;
            font-size: 12px;
        }
   
    
        
    </style>
</head>
<body>
    <header>
        <nav class="wrap">
            <ul>
                <li><a href="#">主页</a></li>
                <li><a href="#about">介绍</a></li>
                <li><a href="#skill">技能</a></li>
                <li><a href="#service">服务</a></li>
                <li><a href="#portfolio">相册</a></li>
                <li><a href="#contact">联系</a></li>
                <li><a href="https://www.jianshu.com/"
                    target="black">简书</a></li>
            </ul>
        </nav>
        
       
        
        
        
        
    </header>
<section id="hello">
    <div class="wrap">
        <img src="./img/qq-photo.jpg" alt="">
        <h1>
            Hello...
        </h1>
        <P>
            I'm QUANQUAN,an happy girl.
        </P>
    </div>
</section>

<section id="about" class="wrap">
    <span>

    </span>
    <div>
       <h2>
           关于我
       </h2>
        <h3>
            一个90后现实主义运营狗的故事
        </h3>
         <p>
             我是圈圈，2019年毕业放弃本科专业会计，从运营小白开始进入互联网行业。 
             
         </p>
         <p>
             一开始我只是个打杂的小客服，更像一块砖，哪里需要哪里搬，刚一入手做的更多的是社群运营，天天都是围着用户打转，了解对方的需求和喜好。 
         </p>
        <p>
            慢慢地在各位老师带领下开始成长，从社群运营到后台管理再到负责公司的线上活动策划以及产品包装，小白开始不白了，写作能力也肉眼可见地在成长。
        </p> 
        <p>
            2020年的我开始全面地了解运营这个行业，从什么都不知道的打杂小白到能够独立负责整个线上策划活动的初级运营，一直都在进步。
        </p>
        <p>
            相信在之后运营路上，我会越走越远，成长为运营界的扛把子！
        </p>
       
    </div>     
</section>

<section id="skill">
	<div class="wrap">
		<h2>
            Skill
        </h2>
        <p>
            下面是我在运营方面的一些技能和熟练度。
        </p>
		<ul>
            <!--流程化思维 -->
            <li><em>Process thinking</em> <progress value="55" max="100"></progress></li>
           <!-- 精细化思维 -->
            <li><em>Refined thinking</em><progress value="55" max="100"></progress></li>
            <!--活动策划 -->
            <li><em>Event Planning</em><progress value="55" max="100"></progress></li>
           <!-- 修图能力 -->
            <li><em>Retouching ability</em><progress value="55" max="100"></progress></li>
            <!-- 写作能力 -->
            <li> <em>Writing Ability</em><progress value="60" max="100"></progress></li>
           <!-- 内容创作 -->
            <li> <em>Content creation</em><progress value="65" max="100"></progress></li>
        </ul>   
	</div>
</section>
<section id="resume">
    <div class="wrap">
        <h2>
            Resume
        </h2>
        <div>
            <h3>
                教育
            </h3>
            <ul>
                <li>2015~2019 重庆大学城市科技学院</li>
                <li> 2019~2020 BT学院注册会计师培训</li>
                <li>   2019~2020 自学运营相关技能</li>
            </ul>
        </div>
        <div>
            <h3>
                工作经历
            </h3>
            <ul>
                <li>
                    2018~2019 北京三十秒心理咨询有限公司
                </li>
                <li>
                    2019~2020 广州小码哥教育科技有限公司
                </li>
                <li>
                    2020~至今 待续
                </li>
            </ul>
        </div>
        </div>
</section>
<section id="service">
    <div class="wrap">
        <h2>
            Service
        </h2>
        <ul>
            <li>
                <i class="iconfont icon-kaifataojian"></i>
                <h3>剪映剪辑 </h3>
                    运用剪映剪辑，做相关的视频分享，抖音推广和直播，对视频内容把控。
            </li>
            <li>
                <i class="iconfont icon-peixun"></i>
                <h3>活动策划 </h3>
                    对公司产品进行定位，根据节日及热点话题策划活动，带动公司产品推广和品牌宣传打造。
            </li>
            <li>
                <i class="iconfont  icon-maikefeng"></i>
                <h3>演讲</h3>
                    能够对新产品推广，产品展示，企业宣传等，进行公开演讲，帮助产品和技术推广。
            </li>
            <li>
                <i class="iconfont icon-24"></i>
                <h3>新媒体写作 </h3> 
                    熟悉各个自媒体写作平台规则，针对平台属性写文章，能够独立撰稿，编辑。 
            </li>
        </ul>
     
        
        
    </div>
</section>
<section id="portfolio">

    <div class="wrap">
        <h2>
            Portfolio
        </h2>
        <ul>
            <li><img src="./img/life01.jpg" alt=""></li>
            <li><img src="./img/life02.jpg" alt=""></li>
            <li><img src="./img/life03.jpg" alt=""></li>
            <li><img src="./img/life04.jpg" alt=""></li>
            <li><img src="./img/life05.jpg" alt=""></li>
            <li><img src="./img/life06.jpg" alt=""></li>
        </ul>
    </div>
</section>
<Section id="contact">
    <div class="wrap">
        <h2>Contact</h2>
        <form action="#" method="POST">
            <input type="text" name="name" placeholder="请输入你的姓名">
            <input type="text" name="email"placeholder="请输入你的邮箱">
            <textarea name="message" id="message" rows="10" placeholder="请输入你的留言"></textarea>
            <button type="submit">提交</button>
        </form>
        <div>
            <img src="./img/code.jpg" alt="">
            <p>请 加 微 信</p>
        </div>

    </div>

</section>
<footer>
    <p>© Copyright <strong>圈圈</strong>. All Rights Reserved</p>
    <p>蜀ICP备15004792号</p>
</footer>

</body>
</html>